<template>
	<div class="page-container page">
		<el-card class="page-card">
			<div v-if="$slots.header" slot="header" class="relative">
				<slot v-if="showHeader" name="header" />
				<div class="absolute right-0 top-0 h-[36px] flex items-center cursor-pointer" @click="showHeader = !showHeader">
					<svg-icon v-if="showHeader" icon-class="stretch" />
					<svg-icon v-else icon-class="expansion" />
				</div>
			</div>
			<div class="w-full flex-1">
				<div v-if="$slots.options" class="page-card-options !<sm:flex-wrap">
					<slot name="options"></slot>
				</div>
				<div v-if="$slots.card" class="mt-[32px] card">
					<slot name="card"></slot>
				</div>
				<slot />
			</div>
			<pagination v-if="total > 0" :limit="pageSize" :page="page" :total="total" @pagination="pagination" />
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'PageContainer',
	props: {
		total: {
			type: Number,
			default: 0,
		},
		page: {
			type: Number,
			default: 1,
		},
		pageSize: {
			type: Number,
			default: 10,
		},
	},
	data() {
		return {
			showHeader: true,
		};
	},
	methods: {
		pagination({ page, limit }) {
			this.$emit('update:page', page);
			this.$emit('update:pageSize', limit);
			this.$emit('getList');
		},
	},
};
</script>

<style scoped lang="scss">
.page {
	.el-card {
		display: flex;
		flex-direction: column;
	}
	.card {
		::v-deep > div {
			@apply <sm:flex-wrap;
		}
	}
	::v-deep .el-card__body {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
}
</style>
